<script setup lang="ts">
import type { UserManageResult } from '@/api/userManage';
import { getUserManage } from '@/api/userManage';
import type { UserManageCondition } from '@/api/userManage';
import { useToggle } from '@vueuse/core';
import { timeFormatter } from '@/utils/dayjs'

// 查询条件初始化
const usersCondition = ref<UserManageCondition>({});

// Vueuse加载效果、危险提示
const [isLoading, toggleLoading] = useToggle(false);

// 查询结果初始化
const usersResult = ref<UserManageResult>({
    records: [],
    current: 1,
    pages: 1,
    size: 10,
    total: 0,
});

// 查询用户管理
async function fetchData(params: UserManageCondition = {}) {
    toggleLoading(true)
    Object.assign(usersCondition.value, params);
    const { data } = await getUserManage(usersCondition.value);
    if (data.code === '000000') {
        usersResult.value = data.data;
    } else {
        ElMessage.error('获取用户管理失败');
        throw new Error('获取用户管理失败');
    }
    toggleLoading(false)
}
onMounted(fetchData);
</script>

<template>
    <div class="users-index">
        <div class="users-index-search">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="手机号">
                    <el-input placeholder="请输入手机号" clearable size="large" />
                </el-form-item>
                <el-form-item label="注册时间">
                    <el-date-picker type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD"
                        date-format="YYYY/MM/DD" size="large" />
                </el-form-item>
                <el-form-item>
                    <el-button type="info" size="large">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-divider>
            <el-icon><el-icon-star-filled /></el-icon>
        </el-divider>
        <div v-loading="isLoading">
            <el-table :data="usersResult.records" border style="width: 100%;">
                <el-table-column type="index" label="序号" align="center" />
                <el-table-column prop="portrait" label="头像" align="center" />
                <el-table-column prop="name" label="用户名" align="center" />
                <el-table-column prop="phone" label="手机号" align="center" />
                <el-table-column prop="createTime" label="注册时间" align="center" :formatter="timeFormatter" />
                <el-table-column prop="status" label="状态" align="center">
                    <el-switch prop="status" active-text="启用" inactive-text="禁用" />
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default>
                        <el-button type="primary">编辑</el-button>
                        <el-button type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div><el-pagination :total="50" border /></div>
    </div>
</template>

<style scoped lang="scss">
.users-index {
    gap: 0.25rem;
    // background-color: rgb(255, 255, 255);
    padding: 0.5rem;
}
</style>
